<template>
  <div>
    <MenuFoldOutlined v-if="store.collapsed && collapsed" @click="toggleCollapsed" />
    <MenuUnfoldOutlined v-else-if="store.collapsed && !collapsed" @click="toggleCollapsed" />

    <a-drawer placement="left" width="210" :visible="visible" :closable="false" @close="onclose">
      <template #title>
        <div class="logo">
          <img src="@/assets/img/logo-wx.png" alt="logo" />
        </div>
        Wx's BBS
      </template>
      <HeadMenu />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import HeadMenu from "@/components/home/head/HomeHeadMenu.vue";
import { useConfigStore } from '@/stores/config';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';

const store = storeToRefs(useConfigStore())
const collapsed = ref(true)
const visible = ref(false)

function toggleCollapsed() {
  collapsed.value = !collapsed.value
  showDrawer()
}
function showDrawer() {
  visible.value = true
}
function onclose() {
  visible.value = false
}

</script>

<style scoped>
div.logo {
  img {
    height: 50px;
    width: 50px;
  }
}
</style>
